<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!--如果是IE 就以标准渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- 视窗——————响应式布局 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

    <!--当前页面的三要素-->
    <title>运维系统</title>
    <meta name="description" content="聚能优电" />
    <meta http-equiv="keywords" content="聚能优电" />
    <script type="text/javascript" src="../../js/verify.js"></script>
    <script type="text/javascript" src="../../js/common/commonfuntion.js"></script>

    <!-- css -->
    <link rel="stylesheet" type="text/css" href="../../css/alarm.css" />

    <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1805932_ysrcp4y0uy9.css">
    <link rel="stylesheet" type="text/css" href="../../css/uploadImg.css" />

    <style>
        html{
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        html body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding:0;
            overflow: auto;
        }

        .alarm_screen .m_title{
            height:auto !important;
        }

        #listdata .shiyong{
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            border-bottom: 1px dotted #1B3150;
            display: block;
            
        }

        #listdata .shiyong .dataleft{
            float: left;
            width: 50%;
            line-height: 1rem;
            font-size: 0.28rem;
            height: 1rem;
            color: #435A7A;
            letter-spacing: 0;
        }

        #listdata .shiyong .dataright{
            float: right;
            width: 45%;
            height: 1rem;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 0.28rem;
            color: #7F94B2;
            letter-spacing: 0;
        }
        #listdata .shiyong .dataright input{
            appearance:button;
            margin:0 2px 0 2px;
        }

        #listdata .jcjg{
            margin-top:10px;
            border-bottom: 1px dotted #1B3150;
        }

        #listdata .jcjg >div{
            font-family: SourceHanSansCN-Regular;
            font-size: 14px;
            color: #435A7A;
            letter-spacing: 0;
            height: 0.8rem;
            line-height: 0.8rem;
        }

        #listdata .jcjg >textarea{
            width: 94%;
            height: 1.5rem;
            padding: 0.1rem 2%;
            background: #001635;
            border: 1px solid #1B3150;
            color: #7F94B2;
        }

        #listdata .main{
            width:100%;
        }
        #listdata .main .upload-content h3{
            font-size: 0.28rem;
            color: #435A7A;
            letter-spacing: 0;
        }

        #listdata .main .upload-content .content-img .file{
            width:80px;
            height:80px;
            line-height:80px;
        }
        #listdata .main .upload-content .content-img .file input{
            width:80px;
            height:80px;
        }
        #listdata .main .upload-content .content-img .content-img-list .content-img-list-item{
            width:80px;
            height:80px;
            line-height:80px;
        }
        #listdata .main .upload-content .content-img .content-img-list .content-img-list-item >img{
            width:100%;
            height:100%;
            display:block;
            overflow:hidden;
        }
        #listdata .main .upload-content .content-img .content-img-list .content-img-list-item div{
            line-height:80px;
        }
        .alarm_screen .sub_wrap{
            width:100%;
            height:40px;
            margin-top:20px;
            
        }

        .alarm_screen .sub_wrap .sub_btn{
            width:80%;
            height:40px;
            line-height:40px;
            margin:auto;
            text-align:center;
            background: #0167FF;
            border-radius: 31px;
            color:#fff;
            font-family: SourceHanSansCN-Regular;
            font-size: 18px;
            color: #FFFFFF;
            letter-spacing: 2.25px;
        }

        
        label{
            margin-bottom:0;
        }
        #jcjg input{
            vertical-align: middle;
            margin:0;
        }

        #jcjg label{
            vertical-align: middle;
        }

    </style>

</head>

<body>
    <div id="container" class="alarm">
        <div class="alarm_01">
            <!--主屏内容-->
            <div class="alarm_screen">
                <div class="m_title">
                    <a href="JavaScript:history.go(-1);" class="back">
                        <img src="../../images/back.svg" alt="">
                    </a>
                    <span class="tit" id="showname"></span>
                </div>
                <div class="m_content">


                    <div class="gjdata">
                        <div class="data_wrap" id="listdata">
                            <div class="datalista shiyong">
                                <span class="dataleft">适用</span>
                                <span class="dataright">
                                    <input type="radio" name="deal" id="to_next" />
                                    <label for="to_next" style="margin-right:10px;">适用</label>
                                    <input type="radio" name="deal" id="sub_end" />
                                    <label for="sub_end">不适用</label>
                                </span>
                            </div>


                            <div class="datalista jcjg" id="jcjg">
                                <div>检查结果</div>
                                <textarea name="" id="checkresult" placeholder="请输入检查结果"></textarea>

                                <div>
                                    <input type="radio" name="state" id="normal" />
                                    <label for="normal" style="margin-right:10px;">正常</label>
                                    <input type="radio" name="state" id="unnormal" />
                                    <label for="unnormal">不正常</label>
                                </div>
                            </div>

                            <div class="main" id="sctp">
                                <div class="upload-content">
                                    <h3>上传图片</h3>
                                    <div class="content-img">
                                        <ul class="content-img-list" id="img_wrap"></ul>
                                        <div class="file">
                                            <i class="gcl gcladd"></i>
                                            <input type="file" name="file" accept="image/*" id="upload" multiple="multiple" />
                                        </div>
                                    </div>
                                    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                                        <div class="modal-dialog modal-lg" role="document">
                                            <div class="modal-content">
                        
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>

                <div class="sub_wrap">
                    <p class="sub_btn" id="sub_btn">保 存</p>
                </div>

            </div>
        </div>
    </div>


    <script>
        (function (win, doc) {
            var docEl = doc.documentElement || document.body; //获取HTML标签

            var container = doc.getElementById("container"); //container元素
            //判断是移动端设备还是PC,移动 就采用'orientationchange',横竖屏事件，PC端就采用onresize，窗口改变时间
            var resize =
                "onorientationchange" in win ? "orientationchange" : "resize";

            function rem() {
                docEl.style.fontSize = 100 * (container.clientWidth / 750) + "px";
            }

            //监听'DOMContent事件:DOM加载完成执行,如果DOMContent事件，那么执行rem函数
            doc.addEventListener("DOMContentLoaded", rem, false);

            //win下监听resize事件,如果resize事件，那么执行rem函数
            win.addEventListener(resize, rem, false);
        })(window, document);
    </script>
    <!-- js -->
    <script type="text/javascript" src="../../js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../layer/layer.js"></script>
    
    <script>
        $(document).ready(function () {

            var projectID = GetQueryString('projectID');
            var name = GetQueryString('name');
            var storage = GetQueryString('storage');
            $("#showname").html(name);

            var applyto;
            var normalto;
            var getItem = window.localStorage.getItem(storage);
            if(getItem){
                getItem = JSON.parse(getItem);

                // input框赋值
                if( getItem.applyto == 'yes' ){
                    applyto = 'yes';

                    $("#to_next").prop("checked",true);
                    $("#jcjg").css('display','block');
                    $("#sctp").css('display','block');
                    if( getItem.normalto == 'yes' ){
                        $("#normal").prop("checked",true);
                        normalto = 'yes';
                    }else if( getItem.normalto == 'no' ){
                        $("#unnormal").prop("checked",true);
                        normalto = 'no';
                    }
                    
                }
                else if(getItem.applyto == 'no'){
                    applyto = 'no';
                    $("#sub_end").prop("checked",true);
                    $("#jcjg").css('display','none');
                    $("#sctp").css('display','none');
                    
                }

                // 文本框赋值
                $("#checkresult").val(getItem.checkresult);

            }




            // 单选框选中事件 适用 不适用
            $('input:radio[name="deal"]').change(function () {

                if ($("#to_next").is(":checked")) {
                    applyto = 'yes';
                    $("#jcjg").css('display','block');
                    $("#sctp").css('display','block');

                    if($("#normal").is(":checked")){
                        $("#normal").prop("checked",false);
                    }
                    if($("#unnormal").is(":checked")){
                        $("#unnormal").prop("checked",false);
                    }
                }
                if ($("#sub_end").is(":checked")) {
                    applyto = 'no';
                    $("#jcjg").css('display','none');
                    $("#sctp").css('display','none');
                }
            })

            // 单选框选中事件 正常 不正常
            $('input:radio[name="state"]').change(function () {
                if ($("#normal").is(":checked")) {
                    normalto = 'yes';
                }
                if ($("#unnormal").is(":checked")) {
                    normalto = 'no';
                }
            })

            
            

            // 图片上传
            var imgFile = []; //文件流
            var imgSrc = []; //图片路径
            var imgBlob = []; //图片Blob


            // 鼠标经过显示删除按钮
            $('.content-img-list').on('mouseover', '.content-img-list-item', function() {
                $(this).children('div').removeClass('hide');
            });
            // 鼠标离开隐藏删除按钮
            $('.content-img-list').on('mouseleave', '.content-img-list-item', function() {
                $(this).children('div').addClass('hide');
            });





            // 上传图片功能
            $('#upload').on('change', function(e) {
                var fileList = this.files;

                var imgBox = '.content-img-list';
                async function upload(file){
                    for(var j = 0; j < file.length; j++){
                        const img = await readImg( file[j] );
                        const blob = await compressImg( img, file[j].type, 1000, 600 );
                        
                        if (blob.size > 1024 * 1024 * 1) { //1MB
                            return alert("上传图片不能超过1MB");
                        };

                        if (blob.type != 'image/png' && blob.type != 'image/jpeg' && blob.type != 'image/gif') {
                            return alert("图片上传格式不正确");
                        }

                        imgBlob.push(blob);
                        imgFile.push(file[j]); //文件流

                        var imgSrcI = getObjectURL(file[j]);
                        imgSrc.push(imgSrcI); //图片路径
                        
                    }
                    addNewContent(imgBox);
                }

                upload( fileList ).catch(e => console.log(e));

                
            });


            // 单个图片删除
            $(".content-img-list").on("click", '.content-img-list-item a .gcllajitong', function() {
                var index = $(this).parent().parent().parent().index();
                imgSrc.splice(index, 1);
                imgFile.splice(index, 1);
                var boxId = ".content-img-list";
                addNewContent(boxId);
            });

            // 保存按钮点击事件
            $('#sub_btn').click(function(){
                var yeschose = $("#to_next").is(":checked");
                var nochose = $("#sub_end").is(":checked");

                var yesnormal = $("#normal").is(":checked");
                var nonormal = $("#unnormal").is(":checked");

                $(this).html(' ');
                $(this).html('正在保存...');

                if(yeschose != nochose){

                    if(yeschose == true && nochose == false){
                        if(yesnormal != nonormal){
                            var uploadimg = [];

                            const main = async () => {
                                if(imgFile.length > 0){
                                    for(let i = 0; i < imgFile.length; i++){
                                        var formFile = '';
                                        formFile = new FormData();
                                        formFile.append('file', imgBlob[i], imgFile[i].name);

                                        await $.ajax({
                                            url: 'http://112.74.169.99:21021/api/FileUpload/GatherImageUploadPost',
                                            type: 'post',
                                            data: formFile,
                                            async: true,
                                            cache: false,
                                            contentType: false,
                                            processData: false,
                                            success: function(res){
                                                console.log('成功');
                                                uploadimg.push(res.result.fileurl);
                                            },
                                            error: function(res){
                                                console.log(res);
                                            }
                                        });
                                    }
                                }
                                var namevalue = {
                                    applyto: applyto,
                                    normalto: normalto,
                                    checkresult: $("#checkresult").val(),
                                    uploadimg: uploadimg
                                }

                                namevalue = JSON.stringify(namevalue);
                                window.localStorage.setItem(storage,{})
                                window.localStorage.setItem(storage,namevalue)
                                $("#sub_btn").html(' ');
                                $("#sub_btn").html('保存成功');
                                layer.msg('保存成功', {
                                    icon: 1,
                                    time: 1000 //1秒关闭（如果不配置，默认是3秒）
                                }, function () {
                                    window.history.back();
                                })
                            };
                            main();

                        }else{
                            layer.msg('请选择检查结果', {
                                icon: 3,
                                time: 1000 //1秒关闭（如果不配置，默认是3秒）
                            })
                            $("#sub_btn").html(' ');
                            $("#sub_btn").html('保 存');
                        }
                    }else if(yeschose == false && nochose == true){
                        var namevalue = {
                            applyto: applyto,
                            normalto: " ",
                            checkresult: " ",
                            uploadimg: []
                        }
                        namevalue = JSON.stringify(namevalue);
                        window.localStorage.setItem(storage,{})
                        window.localStorage.setItem(storage,namevalue)
                        $("#sub_btn").html(' ');
                        $("#sub_btn").html('保存成功');
                        layer.msg('保存成功', {
                            icon: 1,
                            time: 1000 //1秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            window.history.back();
                        })

                    }
                }else{
                    layer.msg('请选择适用类型', {
                        icon: 3,
                        time: 1000 //1秒关闭（如果不配置，默认是3秒）
                    })
                    $("#sub_btn").html(' ');
                    $("#sub_btn").html('保 存');
                }


            });


            //图片展示
            function addNewContent(obj) {
                $(obj).html("");
                for (var a = 0; a < imgSrc.length; a++) {
                    var oldBox = $(obj).html();
                    $(obj).html(oldBox + '<li class="content-img-list-item"><img src="' + imgSrc[a] + '" alt="">' +
                        '<div class="hide"><a index="' + a + '" class="delete-btn"><i class="gcl gcllajitong"></i></a>');
                }
            }

            //建立可存取到file的url
            function getObjectURL(file) {
                var url = null;
                if (window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            }


            // 压缩前将file转换成img对象
            function readImg(file) {
                return new Promise((resolve, reject) => {
                    const img = new Image()
                    const reader = new FileReader()
                    reader.onload = function(e) {
                        img.src = e.target.result
                    }
                    reader.onerror = function(e) {
                        reject(e)
                    }
                    reader.readAsDataURL(file)
                    img.onload = function() {
                        resolve(img)
                    }
                })
            }



            /**
             * 压缩图片
             *@param img 被压缩的img对象
            * @param type 压缩后转换的文件类型
            * @param mx 触发压缩的图片最大宽度限制
            * @param mh 触发压缩的图片最大高度限制
            */
            function compressImg(img, type, mx, mh) {
                return new Promise((resolve, reject) => {
                    const canvas = document.createElement('canvas')
                    const context = canvas.getContext('2d')
                    const { width: originWidth, height: originHeight } = img
                    // 最大尺寸限制
                    const maxWidth = mx
                    const maxHeight = mh
                    // 目标尺寸
                    let targetWidth = originWidth
                    let targetHeight = originHeight
                    if (originWidth > maxWidth || originHeight > maxHeight) {
                    if (originWidth / originHeight > 1) {
                        // 宽图片
                        targetWidth = maxWidth
                        targetHeight = Math.round(maxWidth * (originHeight / originWidth))
                    } else {
                        // 高图片
                        targetHeight = maxHeight
                        targetWidth = Math.round(maxHeight * (originWidth / originHeight))
                    }
                    }
                    canvas.width = targetWidth
                    canvas.height = targetHeight
                    context.clearRect(0, 0, targetWidth, targetHeight)
                    // 图片绘制
                    context.drawImage(img, 0, 0, targetWidth, targetHeight)
                    canvas.toBlob(function(blob) {
                        resolve(blob)
                    }, type || 'image/png')
                })
            }


        });
    </script>

</body>

</html>